<template>
  <div class="add-url">
    <el-button @click="addurl">生成链接</el-button>
    <el-input
      class="addurl-input"
      placeholder="生成链接"
      v-model="value"
      disabled
    >
    </el-input>
    <el-button
      class="addurl-btn"
      v-clipboard:copy="value"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
      >复制</el-button
    >
  </div>
</template>

<script>
import { addurl } from "@/api/addurl";
export default {
  // 组件名称
  name: "addurlIndex",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      value: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  created() {},
  mounted() {},
  // 组件方法
  methods: {
    onCopy(e) {
      // 复制成功
      this.$message({
        message: "复制成功！",
        type: "success",
      });
      this.value=''
    },
    onError(e) {
      // 复制失败
      this.$message({
        message: "复制失败！",
        type: "error",
      });
    },
    async addurl() {
      const path = location.pathname.substring(0,
				location.pathname.substr(1).indexOf('/') + 1)
      const { data } = await addurl();
      this.value = window.location.host + path + "/edit/" + data.data.token;
    },
  },
};
</script> 

<style scoped lang='less'>
.addurl-input {
  margin-top: 20px;
  display: block;
  width: 600px;
}
.addurl-btn {
  margin-top: 20px;
}
</style>
